<template>
	<view class="orderList">
		<view class="top">
			<view class="" @tap="topChange(item)" :class="data.obj.orderState == item.id?'active':''"
				v-for="(item,index) in data.topArr" :key="index">
				<text>{{item.n}}</text>
			</view>
		</view>
		<scroll-view :refresher-triggered="data.refresherBool" :refresher-enabled="true"
			@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower" scroll-y="true">
			<view class="listItem1" v-for="(item,index) in data.result.list" :key="index" @tap="navTo(item)">
				<view class="" v-if="item.orderState.value == 'WAIT_PAY' || item.orderState.value == 'CANCEL'">
					<Cancelled   :orderState="data.obj.orderState" v-if="item.orderState.value == 'CANCEL'"
						:item="item" />
					<Obligation  :index="index" @pay="handePay" :orderState="data.obj.orderState"
						v-if="item.orderState.value == 'WAIT_PAY'" :item="item" />
				</view>
				<view class="" v-else>
					<view class="" :style="index1?'margin-top:20rpx;':''" v-for="(item1,index1) in item.storeDTOS"
						:key="index1">
						<Completed  @handeDelete="handeDelete(index)" :orderState="data.obj.orderState"
							v-if="item1.orderState.value == 'COMPLETE'" :item="item1" />
						<PendingShipment   @share="handeShare" @handeFree="handeFree" :orderState="data.obj.orderState"
							v-if="item1.orderState.value == 'WAIT_SEND'" :item="item1" />
						<PendingReceiptGoods   @handeDelete="handeDelete(index)" :orderState="data.obj.orderState"
							v-if="item1.orderState.value == 'WAIT_RECEIVE'" :item="item1" />
						<Refund   :orderState="data.obj.orderState" v-if="item1.orderState.value == 'REFUND'"
							:item="item1" />
					</view>
					<view class="bot1">
						下单时间:{{item.createTime}}
						<view class="">
							实付款
							<text>￥{{item.totalPayAmount}}</text>
						</view>
					</view>
					<view class="freeOrderFlag"
						v-if="item.storeDTOS.length && item.storeDTOS.find(item=>item.freeOrderFlag.value == 'Y')">
						请及时邀请好友助力（ 30天内有效）
					</view>
				</view>
			</view>
		</scroll-view>

		<u-popup z-index="10" round="20" mode="bottom" :show="data.show2" @close="()=>{data.show2 = false}">
			<view class="popup">
				<view class="popupTop">
					<image @tap="data.show2 = false" src="/static/img/index/101.png" mode="widthFix"></image>
				</view>
				<view class="popupType">
					<view class="" @tap="data.obj1.shareType = 'ALL'">
						<text>公开-所有人可见</text>
						<image v-if="data.obj1.shareType == 'ALL'" src="/static/img/freeShipping/13.png"
							mode="widthFix">
						</image>
					</view>
					<view class="" @tap="data.obj1.shareType = 'FRIEND'">
						<text>好友可见</text>
						<image v-if="data.obj1.shareType == 'FRIEND'" src="/static/img/freeShipping/13.png"
							mode="widthFix">
						</image>
					</view>
				</view>
				<view class="textarea">
					<textarea v-model="data.obj1.remark" placeholder="选填,请输入您要备注的信息"></textarea>
				</view>
				<view class="bot">
					<text @tap="submit1">立刻发起</text>
				</view>
			</view>
		</u-popup>
		<u-popup z-index="10" round="20" mode="center" :show="data.show3" @close="()=>{data.show3 = false}">
			<Share :info="{...data.info,freeList:data.freeList}" @close="data.show3 = false" />
		</u-popup>
		<u-popup :round="20" :zIndex="9999" :show="data.show" @close="data.show = false">
			<view class="confirmOrderBottom"  v-if="!data.isCoupon">
				<view class="top">
					<text></text>
					支付
					<image @tap="data.show = false" src="/static/img/index/101.png" mode="widthFix"></image>
				</view>
				<view class="confirmOrderBottom_1">
					<view v-for="(item,index) in paymentChannels" :key="index" class=""
						@tap="data.payChannel = item.value">
						<view class="left">
							<image :src="'/static/img/index/'+item.icon+'.png'" mode="widthFix"></image>
							{{item.name}}
						</view>
						<image
							:src="data.payChannel == item.value?'/static/img/index/49.png':'/static/img/index/52.png'"
							mode="widthFix">
						</image>
					</view>
				</view>
				<view class="coupon" @tap="handeClick2">
					优惠券
					<view class="">
						{{data.couponCode && data.listCoupons.filter(item=>item.bool).length && '- '+data.listCoupons.filter(item=>item.bool)[0].couponAmount}}
						<image  src="/static/img/index/20.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="bot">
					<view class="left">
						实付现金（元）
						<text>{{subtract(data.payInfo.totalPayAmount,data.couponCode?data.listCoupons.filter(item=>item.bool)[0].couponAmount:0)}}</text>
					</view>
					<view class="right" @tap="pay">
						立即支付
					</view>
				</view>
			</view>
			<view class="couponPopup" v-else>
				<view class="couponPopupTop">
					<view class="">
					
					</view>
					优惠券
					<image @tap="data.isCoupon = false" src="/static/img/index/198.png" mode="widthFix"></image>
				</view>
				<scroll-view scroll-y="true">
					<view class="list">
						<view @tap="handeClick3(item)" class="listItem" v-for="(item,index) in data.listCoupons" :key="index">
							<image :src="item.bool?'/static/img/freeShipping/16.png':'/static/img/freeShipping/17.png'" mode="widthFix"></image>
							<view class="bot">
								<view class="left">
									<text>免单购券</text>
									<view class="left_1">
										<text class="amount">{{item.couponAmount}}</text>
										{{item.couponName}}
									</view>
									<view class="right_1">
										<text>累计免单金额</text>
										{{item.createTime}}-{{item.invalidTime}}
									</view>
								</view>
								<view class="right">
									<text>无门槛</text>
									<text>全平台通用</text>
									<!-- <text>立即使用</text> -->
								</view>
							</view>
					
						</view>
					</view>
				</scroll-view>
				<view class="bot">
					<text @tap="handeClick1">确定</text>
				</view>
			</view>
		</u-popup>
		<SanshuiPaymentPassword v-if="data.show1" :onConfirm="data.onConfirm" :onCancel="()=>{data.show1 = false}" />
	</view>
</template>

<script lang="ts" setup>
	import Share from './components/share.vue'
	import Completed from './components/completed'
	import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
	import PendingShipment from './components/pendingShipment'
	import PendingReceiptGoods from './components/pendingReceiptGoods'
	import Obligation from './components/obligation'
	import Cancelled from './components/cancelled'
	import Refund from './components/refund'
	import { pageLifeProducts } from '@/utils/api/goods'
	import { paymentChannels, payment } from '@/utils/index'
	import {listUserCoupons} from '@/utils/api/freeShipping'
	import { publishFreeOrder, queryJoinDetailBySonOrder } from '@/utils/api/freeShipping'
	import {
		reactive
	} from 'vue';
	import { buyerOrderPage, payOrder } from '@/utils/api/goods'
	const data = reactive<any>({
		topArr: [{ n: '全部', id: '' }, { n: '待付款', id: 'WAIT_PAY' }, { n: '待收货', id: 'WAIT_RECEIVE' }, { n: '已完成', id: 'COMPLETE' }, { n: '已取消', id: 'CANCEL' }],
		index: 0,
		obj1: { shareType: 'ALL' },
		obj: { pageSize: 10, pageNo: 1, orderState: '' },
		result: {},
		httpUrl: getApp().globalData.baseUrl,
		payChannel: paymentChannels[0].value,
		payInfo: {},
		onConfirm: () => { },
		freeList: [],
		info: {},
		freeItem:{}
	})
	uni.$off('orderList');
	uni.$on('orderList', () => {
		data.obj.pageNo = 1;
		requstList(1)
	})
	const handeShare = (sonOrderNo) => {
		data.show3 = true;
		queryJoinDetailBySonOrder({ data: { sonOrderNo} }).then(res => {
			data.info = res.data;
		})
		pageLifeProducts({ data: { queryType: 'FREE', pageNo: 1, pageSize: 6 } }).then((res) => {
			res.data.list.map((item)=>{
				if(item.hasPreferential.value == 'Y'){
					item.price = item.preferentialPrice;
				}
			})
			data.freeList = res.data.list;
		})
	}
	const handeClick3 = (item)=>{
		data.listCoupons.map((item1)=>{
			if(item.id == item1.id){
				item.bool = !item.bool
			}else{
				item1.bool = false
			}
		})
	}
	listUserCoupons().then((res)=>{
		data.listCoupons = res.data;
	})
	const subtract = (num1, num2)=>{
	  const multiplier = Math.pow(10, Math.max(decimalLength(num1), decimalLength(num2)));
	  return ((num1 * multiplier - num2 * multiplier) / multiplier)*1<0?0:(num1 * multiplier - num2 * multiplier) / multiplier;
	}
	const decimalLength = (num)=>{
	  return (num.toString().split('.')[1] || '').length;
	}
	const handeClick2 = ()=>{
		data.listCoupons.map((item)=>{
			item.bool = false;
			if(item.couponCode == data.couponCode){
				item.bool = true
			}
		})
		data.isCoupon = true;
	}
	const handeClick1 = ()=>{
		const item = data.listCoupons.find(item=>item.bool);
		if(item){
			data.couponCode = item.couponCode;
		}else{
			data.couponCode = '';
		}
		data.isCoupon = false;
	}
	const handeFree = (item) => {
		data.show2 = true;
		data.freeItem = item;
		data.obj1.sonOrderNo = item.sonOrderNo
	}
	const submit1 = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		publishFreeOrder({ data: data.obj1 }).then((res) => {
			if (res.code == 200) {
				data.show2 = false;
				uni.hideLoading()
				handeShare(data.obj1.sonOrderNo)
				data.freeItem.joinFlag = 1;
				// uni.navigateTo({
				// 	url: '/pages/myFreeInteraction/index?type=MY'
				// })
				
			}
		})
	}
	const pay = () => {
		data.show = false;
		if (data.payChannel == 'WALLET') {
			data.show1 = true;
			data.onConfirm = (e) => {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				payOrder({ data: { orderNo: data.payInfo.groupOrderNo, payChannel: data.payChannel, payPwd: e,coupouCode:data.couponCode } }).then((res) => {
					if (res.code == 200) {
						payment(data.payChannel, res.data).then((res) => {
							if (data.obj.orderState) {
								data.result.list.splice(data.payInfo.index, 1)
								return;
							}
							data.payInfo.storeDTOS.map((item) => {
								item.orderState.value = 'WAIT_SEND'
							})
							data.payInfo.orderState.value = 'WAIT_SEND'
						})
						uni.hideLoading()
					}
				})
			}
			return
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		payOrder({ data: { orderNo: data.payInfo.groupOrderNo, payChannel: data.payChannel } }).then((res) => {
			if (res.code == 200) {
				payment(data.payChannel, res.data).then((res) => {
					if (data.obj.orderState) {
						data.result.list.splice(data.payInfo.index, 1)
						return;
					}
					data.payInfo.storeDTOS.map((item) => {
						item.orderState.value = 'WAIT_SEND'
					})
					data.payInfo.orderState.value = 'WAIT_SEND'
				})
				uni.hideLoading()
			}
		})
	}
	const handePay = ({ item, index }) => {
		data.show = true;
		data.payInfo = item;
		data.payInfo.index = index;
		data.isCoupon = false;
	}
	const handeDelete = (index) => {
		data.result.total = data.result.total - 1;
		data.result.list.splice(index, 1)
	}
	const requstList = (i = 0) => {
		if (!i) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
		}

		if (data.obj.pageNo == 1) {
			data.result.list = [];
		}
		buyerOrderPage({ data: data.obj }).then((res) => {
			console.log(data.result.list, 'data.result.list')
			res.data.list = [...data.result.list, ...res.data.list];
			data.result = res.data;
			data.refresherBool = false;
			uni.hideLoading()
		})
	}
	const navTo = (item) => {
		uni.navigateTo({
			url: '/pages/lifeOrderDetails/index?groupOrderNo=' + item.groupOrderNo + '&orderState=' + item.orderState.value
		})
	}
	const refresherrefresh = () => {
		data.refresherBool = true;
		data.obj.pageNo = 1;
		requstList()
	}
	const topChange = (item) => {
		if (item.id != data.obj.orderState) {
			data.obj.pageNo = 1;
			data.obj.orderState = item.id;
			requstList()
		}
	}
	const scrolltolower = () => {
		if (data.result.total != data.result.list.length) {
			data.obj.pageNo += 1;
			requstList()
		}
	}
	requstList()
</script>

<style scoped lang="scss">
	.coupon {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		border-radius: 24rpx;
		width: 100%;
		background: #fff;
		margin-top: 20rpx;
		view{
			color: #FF263F;
			display: flex;
			align-items: center;
		}
		image {
			width: 38rpx;
		}
	}
	.couponPopup {
		background: #F4F6FA;
		border-radius: 24rpx 24rpx 0 0;
		.couponPopupTop {
			padding: 24rpx 32rpx 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 36rpx;
			
			view {
				width: 32rpx;
			}
	
			image {
				width: 32rpx;
			}
		}
	
		>.bot {
			padding: 12rpx 50rpx 30rpx 50rpx;
			background-color: #fff;
	
			text {
				display: flex;
				width: 100%;
				height: 88rpx;
				align-items: center;
				justify-content: center;
				border-radius: 44rpx;
				color: #fff;
				background-color: #FF263F;
				font-size: 32rpx;
			}
		}
	
		scroll-view {
			height: 800rpx;
			overflow: auto;
			padding: 24rpx 32rpx;
		}
	
		.list {
			>view:nth-of-type(1) {
				margin-top: 0;
			}
		}
	
		.listItem {
			margin-top: 24rpx;
			// display: flex;
			>image{
				width: 	36rpx;
			}
			.bot {
				margin-top: 20rpx;
				display: flex;
				height: 200rpx;
				border-radius: 24rpx;
				overflow: hidden;
				background: #fff;
	
				>.left {
					flex: 1;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
	
					padding: 0 20rpx;
	
					>image {
						width: 180rpx;
						position: absolute;
						right: -30rpx;
						top: -70rpx;
					}
	
					>text {
						padding: 2rpx 12rpx;
						border-radius: 20rpx 0 20rpx 0;
						background: #FFD7AF;
						color: #C97210;
						font-size: 24rpx;
						position: absolute;
						left: 0;
						top: 0;
					}
	
					.left_1 {
						display: flex;
						align-items: center;
	
						.amount {
							color: #FF263F;
							font-size: 64rpx;
							width: 180rpx;
	
							&:before {
								content: '￥';
								font-size: 36rpx;
								font-weight: bold;
								color: #FF263F;
							}
						}
					}
	
					.right_1 {
						display: flex;
						align-items: center;
						color: #8C8C8C;
						font-size: 20rpx;
	
						text {
							color: #8C8C8C;
							font-size: 20rpx;
							width: 180rpx;
						}
					}
				}
	
				>.right {
					background: linear-gradient(251deg, #FF3E61 0%, #FA2D1C 100%);
					box-shadow: -8rpx 0rpx 32rpx 0rpx rgba(255, 57, 43, 0.2);
					width: 246rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
	
					text:nth-of-type(1) {
						font-size: 36rpx;
						color: #fff;
					}
	
					text:nth-of-type(2) {
						color: rgba(255, 255, 255, .8);
						font-size: 22rpx;
						margin: 10rpx 0;
					}
	
					text:nth-of-type(3) {
						padding: 2rpx 16rpx;
						border-radius: 16rpx;
						background: #fff;
						color: #FA2D1C;
						font-size: 24rpx;
					}
				}
			}
	
		}
	}
	.popup {
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding-top: 26rpx;

		.popupTop {
			display: flex;
			justify-content: flex-end;
			padding: 0 32rpx;

			image {
				width: 42rpx;
			}
		}

		.popupType {
			padding: 0 32rpx;
			overflow: hidden;
			margin: 30rpx 0;

			>view:nth-of-type(1) {
				border-radius: 20rpx 20rpx 0 0;
			}

			>view:nth-of-type(2) {
				border-radius: 0 0 20rpx 20rpx;
			}

			>view {
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;
				background: #F4F6FA;

				text {}

				image {
					width: 48rpx;
				}
			}
		}

		.textarea {
			padding: 0 32rpx;

			textarea {
				width: 100%;
				padding: 24rpx;
				background: #F4F6FA;
				border-radius: 20rpx;
				height: 300rpx;
			}
		}

		.bot {
			padding: 10rpx 32rpx 30rpx 32rpx;

			text {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 88rpx;
				height: 88rpx;
				background: #FF263F;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}

	.freeOrderFlag {
		text-align: center;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #8C8C8C;
		background-color: #F4F6FA;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.bot1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #8C8C8C;
		margin-top: 25rpx;

		view {
			font-size: 24rpx;

			text {
				font-size: 36rpx;
				color: #6B64D3;
			}
		}
	}

	.confirmOrderBottom {
		padding: 24rpx 43rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 30rpx;
			}

			text {
				width: 30rpx;
			}

			font-size: 32rpx;
		}

		.bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.left {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;

				text {
					margin-top: 10rpx;
					color: #FF263F;
				}
			}

			.right {
				width: 190rpx;
				line-height: 80rpx;
				background: #FF263F;
				text-align: center;
				border-radius: 80rpx;
				color: #fff;

			}
		}
	}

	.confirmOrderBottom_1 {
		>view {
			justify-content: space-between;
			// padding: 37rpx 35rpx;
			background: #fff;
			display: flex;
			align-items: center;
			margin-top: 32rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					margin-right: 25rpx;
				}

				font-size: 24rpx;
			}

			>image {
				width: 36rpx;
			}
		}
	}

	.listItem1 {
		padding: 24rpx;
		border-radius: 24rpx;
		background: #fff;
		margin-bottom: 24rpx;
	}

	scroll-view {
		padding: 20rpx 0;
		flex: 1;
		overflow: auto;

	}

	.orderList {
		flex: 1;
		height: 0;
		background: #F4F6FA;
		display: flex;
		flex-direction: column;

		>.top {
			width: 100%;
			background: #fff;
			padding: 20rpx 30rpx 0 30rpx;
			display: flex;
			justify-content: space-between;

			view {
				&::after {
					content: '';
					display: block;
					width: 40rpx;
					height: 4rpx;
					border-radius: 4rpx;
					// background: ;
					margin: 10rpx auto 0 auto;
				}

				text {
					color: #595959;
				}

				display: inline-block;
				padding: 0 24rpx;

			}

			.active {
				&::after {

					background: #6B64D3;
				}

				text {
					color: #6B64D3;
				}
			}
		}

	}
</style>